<template>

	<a-form-model ref="ruleForm" style="" :model="warningForm" class="addWarning" :rules="rules">

		<a-row style="">
			<a-col :span="24">
				<a-form-model-item label="任务名称" :label-col="{span:6}" :wrapper-col="{span:10}" prop="taskName"
				                   ref="taskName">
					<a-input style="" v-model="warningForm.taskName"/>
				</a-form-model-item>
			</a-col>
		</a-row>
		<a-row style="margin-left: 0%;">
			<a-col :span="24">
				<a-form-model-item label="添加预警关键词" :label-col="{span:6}" :wrapper-col="{span:10}" prop="warningKeyword"
				                   ref="warningKeyword">
					<a-input style="margin-left: 0%;" v-model="warningForm.warningKeyword"/>
				</a-form-model-item>
			</a-col>
		</a-row>
		<a-row style="width: 100%;">
			<a-col span="24" offset="6">
				<div style="margin-top: -1%;">
					<div style="">提示：1.在输入框中输入想要关注的词，字数在2-10个之间，如'苹果手机'</div>
					<div style="margin: 0 0 0 43px;">2.您将接收到，精确匹配'苹果手机'这个词的热搜信息</div>
				</div>
			</a-col>
		</a-row>
		<a-row style="margin-top: 1%;width: 100%;">
			<a-checkbox-group style="width: 100%;" v-model="warningForm.warningPlatform">
				<a-form-model-item label="添加预警平台" :label-col="{span:6}" :wrapper-col="{span:16}" style=""
				                   prop="warningPlatform" ref="warningPlatform">
					<a-col :span="8" style="">
						<a-checkbox value="快手">
							快手
						</a-checkbox>
					</a-col>
					<a-col :span="8">
						<a-checkbox value="抖音">
							抖音
						</a-checkbox>
					</a-col>
				</a-form-model-item>
			</a-checkbox-group>

		</a-row>
		<a-row style="margin-top: 0%;">
			<a-form-model-item label="添加预警形式" :label-col="{span:6}" :wrapper-col="{span:18}" prop="rank" ref="rank">
				<a-col :span="4" style="margin-left: 7%;color: black">
					<span>排名新高</span>
				</a-col>
				<a-col :span="10" style="">
					<a-select
							style="width: 120px"
							v-model="warningForm.rank"
					>
						<a-select-option :value="10">
							前十
						</a-select-option>
						<a-select-option :value="5">
							前五
						</a-select-option>
					</a-select>
				</a-col>
			</a-form-model-item>
		</a-row>
		<a-row>
			<a-col :span="4" style="margin-left: 25%;">
				<span style="margin-left: 32%;color: black">起始时间</span>
			</a-col>
			<a-col :span="8">
				<a-date-picker show-time v-model="warningForm.startTime" format="YYYY-MM-DD HH:mm:ss">
					<template slot="renderExtraFooter">

					</template>
				</a-date-picker>
			</a-col>
		</a-row>
		<a-row style="margin-top: 2%;margin-bottom: 2%">
			<a-col :span="4" style="margin-left: 25%;">
				<span style="margin-left: 32%;color: black">结束时间</span>
			</a-col>
			<a-col :span="8">
				<a-date-picker show-time v-model="warningForm.endTime" format="YYYY-MM-DD HH:mm:ss">
					<template slot="renderExtraFooter">

					</template>
				</a-date-picker>
			</a-col>
		</a-row>
		<a-row style="margin-top: 0%;" v-if="warningForm.warningPush">
			<a-form-model-item label="预警类型" :label-col="{span:6}" :wrapper-col="{span:18}" ref="rank">

				<a-col :span="10" style="">
					<a-select
							style="width: 160px"
							v-model="warningForm.warningType"
					>
						<a-select-option :value="1">
							热搜游戏
						</a-select-option>
						<a-select-option :value="2">
							营销事件
						</a-select-option>
						<a-select-option :value="3">
							社会事件
						</a-select-option>
						<a-select-option :value="4">
							运营商涉案事件
						</a-select-option>
					</a-select>
				</a-col>
			</a-form-model-item>
		</a-row>
		<a-row style="margin-top: 0%;" v-if="warningForm.warningPush">
			<a-form-model-item label="命中规则" :label-col="{span:6}" :wrapper-col="{span:18}" prop="hitRule" ref="hitRule">

				<a-col :span="20" style="">
					<span>热榜连续持续</span>
					<el-input style="width:120px" placeholder="正整数" size="mini" oninput="value=value.replace(/[^\d]/g,'')"
					          v-model="warningForm.hitRule"/>
					<span>小时</span>
				</a-col>
			</a-form-model-item>
		</a-row>
	</a-form-model>

</template>

<script>
export default {
	name: "warningAdd",

	data() {
		const validatorFun = (rule, value, callback) => {
			if (value) {
				console.log(value)
				if (value.indexOf('.') >= 0 || value.indexOf('-') >= 0) {
					callback(new Error('请输入正整数'));
				} else {
					callback();
				}

			} else {
				callback();
			}
		};
		return {

			warningForm: {
				hitRule: '',
				warningType: '',
			},//添加预警form
			rules: {
				taskName: [
					{required: true, message: '请输入任务名称', trigger: 'blur'},
				],
				warningKeyword: [
					{required: true, message: '请输入预警关键词', trigger: 'blur'},
					{min: 2, max: 10, message: '字数在2-10个之间', trigger: 'blur'},
				],
				warningPlatform: [
					{required: true, message: '请勾选预警平台', trigger: 'blur'},
				],
				rank: [
					{required: true, message: '请选择预警形式', trigger: 'blur'},
				],
				hitRule: [
					{validator: validatorFun, trigger: 'blur'}
				]
			}
		}
	},
	props: {
		// 获取父类this
		parent: {
			type: Object,
		},
		// 如果添加预警就清空表单数据
		warningFlag: {
			type: Number,
		},
	},
	watch: {
		warningForm(val, oldVal) {

			this.parent.warningForm = this.warningForm
		},
		warningFlag(val, oldVal) {
			this.warningForm = {};
		},
	},
	methods: {
		blurIntFun1(val) {
			console.log(this.warningForm.hitRule)

			if (this.warningForm.hitRule == '' || this.warningForm.hitRule.indexOf('.') >= 0 || this.warningForm.hitRule.indexOf('-') >= 0) {

				this.$nextTick(() => {
					this.$set(this.warningForm, 'hitRule', '')
					console.log(this.warningForm.hitRule)
					this.warningForm.hitRule = null
					this.warningForm.hitRule = ''
					this.$forceUpdate();
				})
			}


		},
	}
}

</script>

<style scoped>

</style>
